<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>

        <com @click="comClick" aaa="我能不能传呢？" class="classname" title="你好世界" data-index="1" id="idname"
            style="color: red;">
        </com>

    </div>
</body>


<template id="com">

    <!-- 
        属性透传：
            所谓的属性透传，其实就是父组件在使用子组件的时候，给其添加的属性会被直接
            传递到组件的根标签中进行使用。前提是你这个组件中只有一个根标签
        
            所有的属性都可以进行透传，事件监听也可以进行透传
     -->
    <!-- 
        组件中最好只有一个根标签，如果有多个根标签，父组件传递的属性系统无法确定被添加
        在哪个根标签上。当然我们可以使用 v-bind='$attrs' 的方式进行设置

      -->

    <div>
        <h1>com 组件11111</h1>
    </div>

    <!-- 每个组件中最好只有一个根标签 -->
    <!-- <div v-bind="$attrs">
        <h1>com 组件22222</h1>
    </div> -->
</template>

<script>
    const app = {
        data() {
            return {}
        },
        methods: {
            comClick() {
                // 当 com 组件被点击的时候会执行该方法
                console.log('被点击了');
            }
        },
        components: {
            com: {
                template: '#com',
                // inheritAttrs: false 配置不要属性透传，属性不做继承
                inheritAttrs: true,
                methods: {

                }
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>